<template>
  <div class="modal-overlay" v-if="visible" @click.self="closeModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3>上传图片</h3>
        <button class="close-btn" @click="closeModal">&times;</button>
      </div>
      
      <div class="modal-body">
        <!-- 拖拽上传区域 -->
        <div 
          class="drop-zone"
          @dragover.prevent="dragOver = true"
          @dragleave="dragOver = false"
          @drop.prevent="handleDrop"
          :class="{ 'drag-over': dragOver }"
        >
          <div class="drop-content">
            <i class="upload-icon">📤</i>
            <p>拖拽图片到此处或</p>
            <input 
              type="file" 
              ref="fileInput"
              accept="image/*"
              @change="handleFileChange"
              class="file-input"
            />
            <button class="select-btn" @click="triggerFileInput">选择文件</button>
          </div>
        </div>
        
        <!-- 预览区域 -->
        <div class="preview-area" v-if="previewImage">
          <img :src="previewImage" alt="预览" class="preview-image" />
          <div class="preview-actions">
            <button @click="confirmUpload" class="confirm-btn">确认上传</button>
            <button @click="cancelPreview" class="cancel-btn">取消</button>
          </div>
        </div>
        
        <!-- 上传进度 -->
        <div class="progress-area" v-if="uploadProgress > 0">
          <div class="progress-bar" :style="{ width: uploadProgress + '%' }"></div>
          <span>{{ uploadProgress }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { uploadImg } from '@/api/BlogVisit';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible', 'upload-success']);

const fileInput = ref(null);
const dragOver = ref(false);
const previewImage = ref(null);
const selectedFile = ref(null);
const uploadProgress = ref(0);

const closeModal = () => {
  props.visible
  emit('update:visible', false);
  resetState();
};

const triggerFileInput = () => {
  fileInput.value.click();
};

const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file && file.type.startsWith('image/')) {
    processImage(file);
  }
};

const handleDrop = (e) => {
  dragOver.value = false;
  const file = e.dataTransfer.files[0];
  if (file && file.type.startsWith('image/')) {
    processImage(file);
  }
};

const processImage = (file) => {
  selectedFile.value = file;
  
  // 创建预览
  const reader = new FileReader();
  reader.onload = (e) => {
    previewImage.value = e.target.result;
  };
  reader.readAsDataURL(file);
};

const cancelPreview = () => {
  previewImage.value = null;
  selectedFile.value = null;
  if (fileInput.value) {
    fileInput.value.value = '';
  }
};

const confirmUpload = async () => {
  if (!selectedFile.value) return;
  
  try {
    uploadProgress.value = 0;
    const interval = await setInterval(() => {
      uploadProgress.value += 10;
      if (uploadProgress.value >= 100) {
        clearInterval(interval);
        setTimeout(() => {


          // 调用上传接口
          uploadImg(selectedFile.value).then((res)=>{
            emit('upload-success', res.data.data);
          });
          closeModal();


        }, 500);
      }
    }, 200);
    
    // 实际项目中替换为真实的上传逻辑
    // await uploadFile(selectedFile.value);
    
  } catch (error) {
    console.error('上传失败:', error);
    uploadProgress.value = 0;
  }
};

const resetState = () => {
  dragOver.value = false;
  previewImage.value = null;
  selectedFile.value = null;
  uploadProgress.value = 0;
  if (fileInput.value) {
    fileInput.value.value = '';
  }
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.drop-zone {
  border: 2px dashed #ccc;
  border-radius: 6px;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.drag-over {
  border-color: #4a90e2;
  background-color: #f0f7ff;
}

.drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.file-input {
  display: none;
}

.select-btn {
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s;
}

.select-btn:hover {
  background-color: #3a7bc8;
}

.preview-area {
  margin-top: 20px;
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.preview-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.confirm-btn, .cancel-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}

.confirm-btn {
  background-color: #4CAF50;
  color: white;
}

.confirm-btn:hover {
  background-color: #3e8e41;
}

.cancel-btn {
  background-color: #f44336;
  color: white;
}

.cancel-btn:hover {
  background-color: #d32f2f;
}

.progress-area {
  margin-top: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  height: 20px;
  position: relative;
}

.progress-bar {
  background-color: #4a90e2;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}

.progress-area span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #333;
}
</style>